apptoolbar = Ext.create('Ext.toolbar.Toolbar', {
	margin : "0 0 0 0"
});

var loginStatusbar = Ext.create('scribbles.StatusBar', {
	defaultText : 'Please login or signup',
	id : 'loginStatusbar',
	itemId : 'loginStatusbar',
	statusAlign : 'left',
	items : [ ' ' ]
});

function invokeMainfunction() {
	// alert("Iam in main function");
}

function constructToolbar() {
	// alert('constructing toolbar' + context.user.roleName);
	apptoolbar.add({
		text : 'Home'
	});

	if (context.user.roleName == 'User') {
		apptoolbar.add({

			text : 'Upload article',
			handler : function() {
				// alert('hi');
				// window.location.hash = "UploadArticle";
				addTokenToHistory("UploadArticle");
				addWindow('article/upload');
			}
		});
	}

	if (context.user.roleName == 'Admin') {
		apptoolbar.add({
			text : 'Drop downs',
			handler : function() {

				// window.location.hash = "Dropdown";
				addTokenToHistory("Dropdown");
				addWindow('jsp/admin/dropdown.jsp');
			}
		});
	}

	if (context.user.roleName == 'Admin') {
		apptoolbar
				.add({
					xtype : 'splitbutton',
					text : 'Admin',
					menu : [
							{
								text : 'Role',
								handler : function() {
									addWindow('Role', 'index.jsp', 'Role', true);
								}
							},
							{
								text : 'Drop downs',
								handler : function() {
									addWindow(
											'Dropdown',
											'http://localhost:8080/scribbles/index.jsp',
											'Dropdown', true);
								}
							} ]
				});
	}
	apptoolbar.add('->');

	apptoolbar.add({
		xtype : 'textfield',
		name : 'txtSearchArticleText',
		emptyText : 'Enter search term'
	});
	apptoolbar.add({
		xtype : 'splitbutton',
		text : 'Search',
		menu : [ {
			text : 'My Articles'
		} ],
		handler : function() {
			//alert('searching');
			addWindow('searchResults', 'articleSearch/getArticlesResult', 'Article Search Results', true);
		}
	});

	// if (context.user.roleName == 'User') {
	apptoolbar.add('->');
	apptoolbar.add({
		text : 'Settings',
		handler : function() {
			// alert('Settings button clicked');
			signinSignupButton.fireEvent('click');
		}
	});
	// }

	apptoolbar.add({
		id : 'signinSignupButton',

		text : 'Logins/Signup',
		menu : {
			layout : 'fit',
			items : signinSignupPanel
		},
		handler : function() {
			// alert('Login/Signup button clicked');
			signinSignupPanel.show();

		}
	});

	/*
	 * apptoolbar.add({ xtype : 'splitbutton', text : 'Login/Signup', menu: {
	 * xtype: 'menu', plain: 'true', items: { xtype: 'panel',
	 * items:loginSignupAccordian } } });
	 */

}

var loginPanel = new Ext.Panel({

	cls : 'empty',
	bodyPadding : '2 2 2 2',
	border : 0,
	items : [ {
		xtype : 'fieldset',
		title : 'Existing user - Sign in',
		items : [ {
			xtype : 'splitter'
		}, {
			xtype : 'splitter'
		}, {
			xtype : 'textfield',
			fieldLabel : 'User ID',
			margin : '4 4 4 4',
			labelWidth : 60,
			allowBlank : false,
			minLength : 8
		}, {
			xtype : 'splitter'
		}, {
			xtype : 'textfield',
			labelWidth : 60,
			margin : '4 4 4 4',
			fieldLabel : 'Password',
			allowBlank : false,
			minLength : 8
		}, {
			xtype : 'splitter'
		}, {
			xtype : 'button',
			text : 'Login',
			align : 'center',

			margin : '20 10 10 10',
			width : 100,
			handler : function() {

			}
		} ]
	} ]
});

var signupPanel = new Ext.form.Panel({
	cls : 'empty',
	layout : 'column',
	bodyPadding : '2 2 2 2',
	mask : true,
	border : 0,
	items : [ {
		xtype : 'fieldset',
		checkboxToggle : true,
		title : 'If you are a new user, sign up here',
		collapsed : false,
		items : [ {
			xtype : 'splitter'
		}, {
			xtype : 'splitter'
		}, {
			xtype : 'textfield',
			fieldLabel : 'First name',
			margin : '4 4 4 4',
			labelWidth : 60,
			name : 'firstName',
			emptyText : 'first name',
			value : 'Rameshashasam',
			allowBlank : false,
			minLength : 8
		}, {
			xtype : 'textfield',
			fieldLabel : 'Last name',
			emptyText : 'last name',
			name : 'lastName',
			value : 'Chaturvedi',
			margin : '4 4 4 4',
			labelWidth : 60,
			allowBlank : false,
			minLength : 8
		}, {
			xtype : 'textfield',
			fieldLabel : 'User ID',
			value : 'rameshramesh',
			name : 'userId',
			margin : '4 4 4 4',
			labelWidth : 60,
			allowBlank : false,
			minLength : 8
		}, {
			xtype : 'textfield',
			labelWidth : 60,
			margin : '4 4 4 4',
			value : 'chaturvedi',
			fieldLabel : 'Password',
			name : 'password',
			allowBlank : false,
			minLength : 8
		}, {
			xtype : 'splitter'
		}, {
			xtype : 'textfield',
			labelWidth : 60,
			margin : '4 4 4 4',
			fieldLabel : 'Email id',
			name : 'emailId',
			value : 'deive@gmail.com',
			vtype : 'email',
			allowBlank : false
		}, {
			xtype : 'hiddenfield',
			name : 'id'
		}, {
			xtype : 'button',
			formBind : true,
			disabled : true,
			text : 'Signup',
			margin : '20 10 10 10',
			width : 100,
			handler : function() {
				signupForm = this.up('form').getForm();
				record = signupForm.getValues();
				loginStatusbar.showBusy();
				signupForm.submit({
					url : 'user/signup.json',
					params : {
						record : Ext.JSON.encode(record)
					},
					success : function(signupForm, action) {
						loginStatusbar.setStatus({
							text : 'User created - Please login now',
							iconCls : 'x-status-custom',
							clear : false
						});
						signup.reset();
					},
					failure : function(signupForm, action) {
						loginStatusbar.setStatus({
							text : 'Error during signup',
							iconCls : 'x-status-custom',
							clear : false
						});
					}
				});
				// user = loginForm.getValues();
				// alert('user : ' + user.firstName);
				// user.save();
			}
		} ]

	} ]
});

var accordion = new Ext.Panel({
	width : 270,
	height : 270,
	layout : 'accordion',
	items : [ signupPanel, loginPanel ]
});

var signinSignupPanel = new Ext.Panel({
	id : 'signinSignupPanel',
	height : 450,
	border : 0,
	margin : '0 0 0 0',
	items : [ loginPanel, signupPanel ],
	dockedItems : [ {
		xtype : 'container',
		dock : 'bottom',
		layout : {
			type : 'hbox',
			align : 'middle'
		}
	} ],
	bbar : loginStatusbar
});

// <a href="<c:url value="/j_spring_security_logout"/>">Logout</a>
